<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <script>

        const testArr = [
            {
                code: 1,
                name: '芜湖',
                consignee: '张三',
                createTime: '2023-11-8 17:13:32',
                count: 2,
                price: 20,
                discount: 5,
                pay: 15,
                remark: '盖亚'
            },
            {
                code: 2,
                name: '芜湖',
                consignee: '张三',
                createTime: '2023-11-8 17:13:32',
                count: 2,
                price: 20,
                discount: 5,
                pay: 15,
                remark: '盖亚'
            },
            {
                code: 3,
                name: '芜湖',
                consignee: '张三',
                createTime: '2023-11-8 17:13:32',
                count: 2,
                price: 20,
                discount: 5,
                pay: 15,
                remark: '盖亚'
            },
            {
                code: 4,
                name: '芜湖',
                consignee: '张三',
                createTime: '2023-11-8 17:13:32',
                count: 2,
                price: 20,
                discount: 5,
                pay: 15,
                remark: '盖亚'
            }

        ]
        const moneyObj = {
            amount: '壹佰元整',
            money: '100'
        }


        function renderTable() {
            const divNode = document.createElement('div');
            const trRow = document.createElement('tbody');
            const table = document.createElement('table');
            const tableIdRow = document.createElement('tr');
            const tableMonyRow = document.createElement('tr');
            const divNodeHone = document.createElement('h1');
            const divNodeUl = document.createElement('div')
            const divNodeP = document.createElement('p')
            const divNodeLI = document.createElement('div')
            const divNodeMeony = document.createElement('div')
            // 为table添加样式
            table.style.borderCollapse = 'collapse';
            table.style.width = '100%';
            divNode.style.padding = '30px'
            divNodeHone.style.textAlign = 'center'
            divNodeHone.innerText = '发货单'
            divNodeP.innerText = '说明:本单视作合同,签字生效,注意清单物品'
            divNodeUl.style.width = '100%'
            divNodeUl.style.marginBottom = '10px'
            divNodeLI.style.width = '100%'
            divNodeMeony.style.marginTop = '10px'
            divNodeMeony.innerText = `合计金额:$10000`
            // 将行添加到表格中
            table.appendChild(tableIdRow);
            table.appendChild(tableMonyRow);

            // 将表格添加到tbody中
            trRow.appendChild(table);

            //收货地址
            function location() {
                return `
                    <div style="display: inline-block; width: 49%; text-align: left;">客户地址:&nbsp;&nbsp;&nbsp;四川省眉山市</div>
                    <div style="display: inline-block; width: 50%; text-align: right;">送货日期:&nbsp;&nbsp;&nbsp;2023-11-9 11:39:28</div> 
                 `
            }
            //盖章
            function stamp() {
                return `
                 <div  style="display: inline-block; width: 49%; text-align: left;">收货单位及经手人:&nbsp;(盖章)</div>
                 <div style="display: inline-block; width: 50%; text-align: right;">送货单位及经手人:&nbsp;(盖章)</div>
                 `
            }

            // 表头
            function print() {
                return `
            <th style="border: 1px solid black; padding: 8px; text-align: center;">订单编码</th>
            <th style="border: 1px solid black; padding: 8px; text-align: center;">商品名称</th>
            <th style="border: 1px solid black; padding: 8px; text-align: center;">收货人</th>
            <th style="border: 1px solid black; padding: 8px; text-align: center;">购买时间</th>
            <th style="border: 1px solid black; padding: 8px; text-align: center;">购买数量</th>
            <th style="border: 1px solid black; padding: 8px; text-align: center;">金额</th>
            <th style="border: 1px solid black; padding: 8px; text-align: center;">优惠价格</th>
            <th style="border: 1px solid black; padding: 8px; text-align: center;">实付金额</th>
            <th style="border: 1px solid black; padding: 8px; text-align: center;">备注</th>
               `;
            }

            // 表内容
            let htmlTr = '';
            testArr.forEach(item => {
                htmlTr += `
            <tr>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">${item.code}</td>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">${item.name}</td>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">${item.consignee}</td>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">${item.createTime}</td>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">${item.count}</td>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">${item.price}</td>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">${item.discount}</td>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">${item.pay}</td>
                <td style="border: 1px solid black; padding: 8px; text-align: center;">${item.remark}</td>
            </tr>
        `;
            });



            tableIdRow.innerHTML = print();
            trRow.innerHTML = htmlTr;
            // tableMonyRow.innerHTML = name(moneyObj);
            divNodeUl.innerHTML = location()
            divNodeLI.innerHTML = stamp()

            table.appendChild(tableIdRow);
            table.appendChild(trRow);
            table.appendChild(tableMonyRow);
            divNode.appendChild(divNodeHone);
            divNode.appendChild(divNodeUl);
            divNode.appendChild(table);
            divNode.appendChild(divNodeMeony);
            divNode.appendChild(divNodeP);
            divNode.appendChild(divNodeLI);

            document.body.appendChild(divNode);

            const tableContent = divNode.outerHTML;
            console.log(tableContent);

        }


        renderTable();


    </script>

</body>

</html>